<template>
  <div class="modal modal__wrap">
    <div class="modal__main">
      <div class="modal__main__content">
        <div class="modal__main__content__title">计时器已暂停。点击下方按钮将继续答题。</div>
        <div class="modal__main__content__text">
          在真实机考中没有暂停功能。
        </div>
      </div>
      <div class="modal__main__footer">
        <div class="modal__main__footer__btn--cancel modal__main__footer__btn" style="display: none;">Cancel</div>
        <div class="modal__main__footer__btn--confirm modal__main__footer__btn first" @click="start">
          继续做题</div>
      </div>
      <div class="modal__main__close" style="display: none;"><span class="close-icon"></span></div>
    </div>
    <div class="modal__bg"></div>
  </div>
</template>

<script>
  export default {
    name: 'modal',
    data() {
      return {

      }
    },
    methods: {
      start() {
        this.$emit('start');
      }
    },
    mounted() {

    }
  }

</script>

<style lang="less">
  .modal {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999;

    .modal__main {
      width: 520px;
      height: 240px;
      border-radius: 4px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
      z-index: 9999;
      border-radius: 5px;

      .modal__main__content {
        margin-top: 60px;
        text-align: center;
      }

      .modal__main__footer {
        text-align: center;
        height: 47px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
      }

      .modal__main__footer__btn:last-child {
        margin-left: 60px;
      }

      .modal__main__footer__btn.first {
        margin-left: 0 !important;
      }

      div.modal__main__footer__btn--confirm {
        color: #7c7ae6;
        border: 1px solid #5172ff;
      }

      .modal__main__footer__btn {
        min-width: 120px;
        height: 40px;
        padding: 0 10px;
        line-height: 40px;
        border-radius: 4px;
        text-align: center;
        display: inline-block;
        color: #fff;
        cursor: pointer;
        margin: 0;
      }

      .modal__main__content__text,
      .modal__main__content__title {
        font-size: 18px;
        font-weight: 400;
        color: #333;
        line-height: 30px;
      }

      .modal__main__content__text {
        margin: 0 auto;
        max-width: 85%;
      }
    }

    .modal__bg {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 222;
      margin: auto;
      width: 100%;
      height: 100%;
      opacity: .3;
      background: #000;
    }
  }

</style>
